<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="课程名称" prop="name">
      <el-tag>{{form.name}}</el-tag>
    </el-form-item>
    <el-form-item label="福利类型">
      <el-select v-model="form.welfareType" placeholder="请选择" @change="handle($event)">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-show="cash">
      <h3>现金福利</h3>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="总金额">
          <el-input v-model="form.amount"></el-input>
        </el-form-item>
        <el-form-item label="福利数">
          <el-input v-model="form.count"></el-input>
        </el-form-item>
        <el-form-item label="福利解锁条件" label-width="100px">
          <el-select v-model="form.unlockCondition" placeholder="请选择" @change="handleWelfare($event)">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="次数">
          <el-input v-model="form.times"></el-input>
        </el-form-item>
        <el-form-item label="分配方式" label-width="100px">
          <el-select v-model="form.welfares" placeholder="请选择" @change="handleAllot($event)">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item v-show="chit">
      <h3>代金券福利</h3>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="抵扣金额">
          <el-input v-model="form.discount"></el-input>
        </el-form-item>
        <el-form-item label="福利数">
          <el-input v-model="form.count"></el-input>
        </el-form-item>
        <el-form-item label="福利解锁条件" label-width="100px">
          <el-select v-model="form.unlockCondition" placeholder="请选择" @change="handleWelfare($event)">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="次数">
          <el-input v-model="form.times"></el-input>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item v-show="gift">
      <h3>礼品福利</h3>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="礼品">
          <el-input v-model="form.giftName"></el-input>
        </el-form-item>
        <el-form-item label="福利数">
          <el-input v-model="form.count"></el-input>
        </el-form-item>
        <el-form-item label="福利解锁条件" label-width="100px">
          <el-select v-model="form.unlockCondition" placeholder="请选择" @change="handleWelfare($event)">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="次数">
          <el-input v-model="form.times"></el-input>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="$router.push({path: '/edit/coursewelfare'})">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { submitShare, searchShare } from "@/api/course/courseDetail";
export default {
  data() {
    return {
      form: {},
      options: [
        {
          value: "1",
          label: "现金福利"
        },
        {
          value: "2",
          label: "代金券福利"
        },
        {
          value: "3",
          label: "礼品福利"
        }
      ],
      options1: [
        {
          value: "1",
          label: "新用户查看次数"
        },
        {
          value: "2",
          label: "分享次数"
        },
        {
          value: "3",
          label: "咨询次数"
        }
      ],
      options2: [
        {
          value: "1",
          label: "均分"
        },
        {
          value: "2",
          label: "随机"
        }
      ],
      value: "",
      cash: false,
      chit: false,
      gift: false
    };
  },

  created() {
    searchShare(1).then(res => {
      this.form = res.data.data
      if(this.form.welfareType === "1") {
        this.cash = true;
        this.chit = false;
        this.gift = false;
      }
      if (this.form.welfareType === "2") {
        this.chit = true;
        this.cash = false;
        this.gift = false;
      }
      if (this.form.welfareType === "3") {
        this.gift = true;
        this.chit = false;
        this.cash = false;
      }
    })
  },
  methods: {
    // 下拉菜单选中
    handle(value) {
      if (value === "1") {
        this.cash = true;
        this.chit = false;
        this.gift = false;
      }
      if (value === "2") {
        this.chit = true;
        this.cash = false;
        this.gift = false;
      }
      if (value === "3") {
        this.gift = true;
        this.chit = false;
        this.cash = false;
      }
      this.form.welfareType = value;
    },
    handleWelfare(key) {
      this.form.unlockCondition = key;
    },
    handleAllot(key) {
      this.form.assignType = key;
    },
    onSubmit() {
      this.form.amount = +this.form.amount
      this.form.count = +this.form.count
      this.form.times = +this.form.times
      submitShare(this.form).then(res => {
        this.$message({
          message: "编辑成功",
          type: "success"
        });
        this.$router.push({path: '/edit/coursewelfare'})
      })
    }
  }
};
</script>

<style>
</style>
